<template>
    <section id="quicklook" class="plugin">
        <div class="d-flex justify-content-between">
            <span class="text-start text-truncate">
                {{ cpu_name }}
            </span>
            <span v-if="cpu_hz_current" class="text-end d-none d-xxl-block frequency">
                {{ cpu_hz_current }}/{{ cpu_hz }}Ghz
            </span>
        </div>
        <div class="table-responsive">
            <table class="table table-sm table-borderless">
                <tr v-if="!args.percpu">
                    <td scope="col">CPU</td>
                    <td scope="col" class="progress">
                        <div
:class="`progress-bar progress-bar-${getDecoration('cpu')}`" role="progressbar"
                            :aria-valuenow="cpu" aria-valuemin="0" aria-valuemax="100" :style="`width: ${cpu}%;`">
                            &nbsp;
                        </div>
                    </td>
                    <td scope="col" class="text-end"><span>{{ cpu }}%</span></td>
                </tr>
                <tr v-for="(percpu, percpuId) in percpus" v-if="args.percpu" :key="percpuId">
                    <td scope="col">CPU{{ percpu.number }}</td>
                    <td scope="col" class="progress">
                        <div
:class="`progress-bar progress-bar-${getDecoration('cpu')}`" role="progressbar"
                            :aria-valuenow="percpu.total" aria-valuemin="0" aria-valuemax="100"
                            :style="`width: ${percpu.total}%;`">
                            &nbsp;
                        </div>
                    </td>
                    <td scope="col" class="text-end"><span>{{ percpu.total }}%</span></td>
                </tr>
                <tr v-for="(key) in stats_list_after_cpu">
                    <td scope="col">{{ key.toUpperCase() }}</td>
                    <td scope="col" class="progress">
                        <div
:class="`progress-bar progress-bar-${getDecoration(key)}`" role="progressbar"
                            :aria-valuenow="stats[key]" aria-valuemin="0" aria-valuemax="100"
                            :style="`width: ${stats[key]}%;`">
                            &nbsp;
                        </div>
                    </td>
                    <td scope="col" class="text-end"><span>{{ stats[key] }}%</span></td>
                </tr>
            </table>
        </div>
    </section>
</template>

<script>
import { store } from "../store.js";

export default {
	props: {
		data: {
			type: Object,
		},
	},
	data() {
		return {
			store,
		};
	},
	computed: {
		args() {
			return this.store.args || {};
		},
		config() {
			return this.store.config || {};
		},
		stats() {
			return this.data.stats["quicklook"];
		},
		view() {
			return this.data.views["quicklook"];
		},
		cpu() {
			return this.stats.cpu;
		},
		cpu_name() {
			return this.stats.cpu_name;
		},
		cpu_hz_current() {
			return (this.stats.cpu_hz_current / 1000000).toFixed(0);
		},
		cpu_hz() {
			return (this.stats.cpu_hz / 1000000).toFixed(0);
		},
		percpus() {
			const cpu_list = this.stats.percpu.map(
				({ cpu_number: number, total }) => ({ number, total }),
			);
			const max_cpu_display = parseInt(this.config.percpu.max_cpu_display);
			if (this.stats.percpu.length > max_cpu_display) {
				var cpu_list_sorted = cpu_list.sort((a, b) => b.total - a.total);
				const other_cpu = {
					number: "x",
					total: Number(
						(
							cpu_list_sorted
								.slice(max_cpu_display)
								.reduce((n, { total }) => n + total, 0) /
							(this.stats.percpu.length - max_cpu_display)
						).toFixed(1),
					),
				};
				// Add the top n this
				// and the mean of others CPU
				cpu_list_sorted = cpu_list_sorted.slice(0, max_cpu_display);
				cpu_list_sorted.push(other_cpu);
			}
			return this.stats.percpu.length <= max_cpu_display
				? cpu_list
				: cpu_list_sorted;
		},
		stats_list_after_cpu() {
			return this.view.list.filter((key) => !key.includes("cpu"));
		},
	},
	methods: {
		getDecoration(value) {
			if (this.view[value] === undefined) {
				return;
			}
			return this.view[value].decoration.toLowerCase();
		},
	},
};
</script>